<template>
	<div class="mobile_home">
		<div class="banner">
			<el-carousel :interval="5000" arrow="nerver" height="10rem">
				<el-carousel-item v-for="item in hot2list" :key="item.id">
					<img :src="`${$ip}/api/public/showimg/${item.picture}`"/>
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 传递的数据如果是固定的字符串，那么不需要 v-bind 指令 -->
		<MobileHomelist proptitle="热门推荐" :proplist="hotlist"></MobileHomelist>
		<MobileHomelist proptitle="新书上市" :proplist="newList"></MobileHomelist>

	</div>
</template>

<script>
	import MobileHomelist from '../../components/mobile/home/MobileHomeList.vue'

	export default {
		name: 'MobileHome',
		components: {
			MobileHomelist,

		},
		computed: {
			//  forEach/for..in/for..of 都是可以在需要被限制输出的数据数量模块使用
			// map 基本确定不在更改数组的长度，只不过数据的内容发生格式化的变化
			HotBanner() {
				this.hot2list.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				let arr = this.hotlist.forEach((item, i) => {
					if (i < 4) {
						arr.push(item);
					}
				})
				return arr;
			}
		},
		data() {
			return {
				hot2list: [],
				hotlist: [],
				newList: []
			}
		},
		mounted() {
			this.$get("/api/public/findHot/1/4").then((resp) => {
				console.log(resp.data.data);
				this.hot2list = resp.data.data;
			});

			this.$get("/api/public/book/findTopSale/5").then((resp) => {
				this.hotlist = resp.data.data;
			});

			this.$get("/api/public/findPageBook/1/10/0").then((resp) => {
				this.newList = resp.data.data.books;
			});
		}
	}
</script>

<style>
	.mobile_home {
		background-color: #f0d4a0;
		position: relative;

	}

	.banner {
		width: 100%;
		height: 10rem;
		background-color: orange;
		margin-top: -2rem;
	}

	.banner img {
		width: 100%;
		height: 100%;
	}

	/* 穿刺 CSS 用于修改固定组件样式的操作 */
	.banner .el-carousel /deep/ .el-carousel__button {
		height: 5px !important;

	}

	.banner .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #0874fe !important;
	}
</style>
